import { Table, TableColumnsType } from "antd"
import React from "react"

import { SFlex } from "@/components/common"
import LockStatus from "@/components/common/lockStatus"
import { useLocale } from "@/locales"
import { mappingBusinessModelFilter } from "@/utils/util"

interface ProxyAccountInfo {
	userName: string
	proxyLevel: number
	parentProxyName: string
	topProxyName: string
	businessModel: number
	paymentLockStatus: number
	loginLockStatus: number
	gameLockStatus: number
	createdAt: string
}

interface Props {
	loading: boolean
	proxyAccountInfo: ProxyAccountInfo
}

const AgentAccountInformationTable: React.FC<Props> = ({ loading, proxyAccountInfo }) => {
	const { newFormat } = useLocale()

	const accountColumns: TableColumnsType = [
		{
			title: newFormat("funds.columns.userName"),
			dataIndex: "userName",
			key: "userName",
			align: "center",
			render: () => proxyAccountInfo.userName
		},
		{
			title: newFormat("funds.columns.proxyLevel"),
			dataIndex: "proxyLevel",
			key: "proxyLevel",
			align: "center",
			render: () => proxyAccountInfo.proxyLevel
		},
		{
			title: newFormat("funds.columns.parentProxyName"),
			dataIndex: "parentProxyName",
			key: "parentProxyName",
			align: "center",
			render: () => proxyAccountInfo.parentProxyName || "-"
		},
		{
			title: newFormat("funds.columns.topProxyName"),
			dataIndex: "topProxyName",
			key: "topProxyName",
			align: "center",
			render: () => proxyAccountInfo.topProxyName
		},
		{
			title: newFormat("funds.columns.businessModel"),
			dataIndex: "businessModel",
			key: "businessModel",
			align: "center",
			render: () => newFormat(mappingBusinessModelFilter(`${proxyAccountInfo.businessModel}`))
		},
		{
			title: newFormat("funds.columns.accountStatus"),
			dataIndex: "accountStatus",
			key: "accountStatus",
			align: "center",
			render: () => <LockStatus proxyAccountInfo={proxyAccountInfo} />,
			width: 115
		},
		{
			title: newFormat("funds.columns.createdAt"),
			dataIndex: "createdAt",
			key: "createdAt",
			align: "center",
			render: () => proxyAccountInfo.createdAt || "-"
		}
	]

	return (
		<SFlex vertical>
			<div>{newFormat("funds.title.agent_account_information")}</div>
			<Table
				size="small"
				className="small-size-table"
				dataSource={[proxyAccountInfo]}
				columns={accountColumns}
				pagination={false}
				rowKey="userName"
				style={{ width: "100%", margin: "15px 0" }}
				loading={loading}
			/>
		</SFlex>
	)
}

export default AgentAccountInformationTable
